page {
  z-index: 1;
}
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: ' ';
  clear: both;
  height: 0;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
//课程
.course-boxer {
  .course-filter {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    align-content: center;
    justify-content: center;
    background: #f7f7f7;
    font-size: 28rpx;
    .u-arrow {
      margin-left: 10rpx;
    }
    &.active {
      color: #14cc76;
      .u-arrow-up {
        border-top-color: #14cc76;
      }
    }
  }

  .shade {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    overflow: hidden;
    z-index: 1000;
    // position: absolute;
  }

  .conts {
    box-shadow: 0 8rpx 16rpx 0px rgba(0, 0, 0, 0.1);
    width: 100%;
    background: #fff;
    // position: fixed;
    // top: 80rpx;
    padding: 40rpx 0;
    font-size: 24rpx;

    .filter-name {
      margin-left: 32rpx;
      color: #9b9b9b;
      margin-bottom: 14rpx;
    }

    .grade-box,
    .subject-box {
      padding: 0 32rpx;
      .item {
        overflow: hidden;
        position: relative;
        text-align: center;
        background: #f1f1f1;
        border-radius: 28rpx;
        color: #757575;
        line-height: 56rpx;
        white-space: nowrap;
        margin: 14rpx 0 30rpx 0;
        border: 2rpx solid transparent;
        padding: 0 6rpx;
        &.c-active,
        &.active {
          background: rgba(20, 204, 118, 0.1);
          color: #07d0b0;
          border-color: #14cc76;
        }
      }
    }

    .sure-choose {
      width: 690rpx;
      height: 80rpx;
      background: #14cc76;
      border-radius: 40rpx;
      margin: 60rpx auto 0 auto;
      font-size: 32rpx;
      text-align: center;
      line-height: 80rpx;
      color: #fff;
    }
  }

  .hot-course {
    background: #fff;
    padding: 10rpx 40rpx 40rpx 40rpx;
    min-height: 900rpx;
    .course-box {
      margin-top: 40rpx;
      .course {
        box-shadow: 0 0 12rpx 0 rgba(0, 0, 0, 0.1);
        border-radius: 16rpx;
        padding: 60rpx 20rpx 40rpx 20rpx;
        margin-bottom: 40rpx;
        position: relative;
        border: 2rpx solid #f1f1f1;
        .cover {
          width: 200rpx;
          height: 150rpx;
          border-radius: 16rpx;
        }
        .tag {
          position: absolute;
          right: 0;
          top: 0;
          border-radius: 0 16rpx 0 16rpx;
          color: #fff;
          display: inline-block;
          font-size: 24rpx;
          font-weight: normal;
          padding: 0 20rpx;
          line-height: 40rpx;
          &.primary {
            color: #14cc76;
            background: rgba(20, 204, 118, 0.1);
          }
          &.junior {
            color: #ffba00;
            background: rgba(255, 186, 0, 0.1);
          }
          &.senior {
            color: #fe7141;
            background: rgba(254, 113, 65, 0.1);
          }
        }
        .base-info {
          font-size: 28rpx;
          .course-name {
            height: 106rpx;
            max-height: 80rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            color: #4a4a4a;
            font-size: 32rpx;
            font-weight: bold;
          }
          .school-name {
            font-size: 28rpx;
            margin-top: 16rpx;
            color: #14cc76;
            font-weight: 400;
          }

          .other {
            margin-top: 40rpx;
            font-size: 24rpx;
            color: #757575;
            justify-content: space-between;

            .teachers {
              align-content: flex-start;
              .teacher {
                text-align: center;
                .avatar {
                  width: 48rpx;
                  height: 48rpx;
                  border-radius: 100%;
                }
                .name {
                  color: #9b9b9b;
                  display: inline-block;
                  width: 110rpx;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  font-size: 24rpx;
                }
              }
            }

            .price {
              color: #ff3b30;
              font-size: 40rpx;
              text-align: right;
            }
            .limited {
              color: #ff1e32;
              font-size: 24rpx;
              margin-right: 12rpx;
            }
            .joined-num {
              color: #9b9b9b;
              font-size: 24rpx;
            }
          }
        }
      }
    }
  }
}

//视频
.video-boxer {
  .error {
    color: red;
    font-size: 30rpx;
    width: 100%;
    text-align: center;
  }
  .course-tree {
    margin-top: 30rpx;
    font-size: 28rpx;
    color: #757575;
    padding: 0 30rpx;
    .icon-chapter {
      color: #9b9b9b;
      margin-right: 20rpx;
    }
    .check {
      display: inline-block;
      line-height: 80rpx;
      .icon-check {
        color: #14cc76;
        font-size: 20rpx;
      }
    }
    .cat-txt {
      margin: 20rpx 0;
      &.first {
        font-size: 32rpx;
        font-weight: bold;
        color: #4a4a4a;
        justify-content: space-between;
        .check {
          line-height: 30rpx;
        }
      }
    }
    .sub-cat {
      margin-left: 60rpx;
      > view {
        justify-content: space-between;
      }
    }
  }
  .course-filter,
  .knowledge-filter {
    float: left;
    width: 50%;
    text-align: center;
    height: 80rpx;
    line-height: 80rpx;
    align-content: center;
    justify-content: center;
    background: #f7f7f7;
    font-size: 28rpx;
    .u-arrow {
      margin-left: 10rpx;
    }
    &.active {
      color: #14cc76;
      .u-arrow-up {
        border-top-color: #14cc76;
      }
    }
  }

  .shade {
    width: 100%;
    top: 80rpx;
    background: rgba(0, 0, 0, 0.5);
    overflow: hidden;
    z-index: 1000;
    // position: absolute;
  }

  .conts {
    box-shadow: 0 8rpx 16rpx 0px rgba(0, 0, 0, 0.1);
    width: 100%;
    background: #fff;
    // position: fixed;
    // top: 80rpx;
    padding: 40rpx 0;
    font-size: 24rpx;

    .filter-name {
      margin-left: 32rpx;
      color: #9b9b9b;
      margin-bottom: 14rpx;
    }
    .knowledge-box {
    }

    .grade-box,
    .subject-box {
      padding: 0 32rpx;
      .item {
        position: relative;
        text-align: center;
        background: #f1f1f1;
        border-radius: 28rpx;
        overflow: hidden;
        color: #757575;
        line-height: 56rpx;
        white-space: nowrap;
        margin: 14rpx 0 30rpx 0;
        border: 2rpx solid transparent;
        padding: 0 6rpx;
        &.c-active,
        &.active {
          background: rgba(20, 204, 118, 0.1);
          color: #07d0b0;
          border-color: #14cc76;
        }
      }
    }

    .sure-choose {
      width: 690rpx;
      height: 80rpx;
      background: #14cc76;
      border-radius: 40rpx;
      margin: 60rpx auto 0 auto;
      font-size: 32rpx;
      text-align: center;
      line-height: 80rpx;
      color: #fff;
    }
  }

  .video-box {
    background: #fff;
    padding: 40rpx;
    margin-top: 20rpx;
    font-size: 0;
    min-height: 1900rpx;
    .video {
      margin-bottom: 60rpx;
      display: inline-block;
      margin-right: 0;
      text-align: center;
      &:nth-child(2n + 1) {
        margin-right: 23rpx;
      }

      .cover {
        width: 320rpx;
        height: 180rpx;
        border-radius: 16rpx;
        position: relative;
        image {
          width: 100%;
          height: 180rpx;
          border-radius: 16rpx;
        }
        .video-tip {
          position: absolute;
          right: 10rpx;
          bottom: 10rpx;
          height: 32rpx;
          min-width: 104rpx;
          border-radius: 16rpx;
          background: rgba(33, 33, 33, 0.8);
          text {
            color: #ffffff;
            font-size: 20rpx;
            line-height: 32rpx;
          }
          image {
            width: 16rpx;
            height: 16rpx;
            margin-right: 6rpx;
          }
        }
      }
      .video-title {
        text-align: left;
        width: 320rpx;
        height: 80rpx;
        font-size: 28rpx;
        line-height: 40rpx;
        margin-top: 20rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .video-knowledge {
        text-align: left;
        width: 320rpx;
        color: #14cc76;
        font-size: 24rpx;
        line-height: 34rpx;
        height: 34rpx;
        margin-top: 10rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
    }
  }
}

//教师
.teacher-boxer {
  .famous-teacher {
    background: #fff;
    padding: 10rpx 40rpx;
    .teacher-box {
      margin-top: 40rpx;
      .teacher {
        margin-bottom: 40rpx;
        .cover {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
        }
        .base-info {
          padding-top: 8rpx;
          width: 440rpx;
          margin-left: 30rpx;
          font-size: 24rpx;
          .name {
            color: #4a4a4a;
            font-weight: bold;
            font-size: 28rpx;
            .tag {
              margin-left: 10rpx;
            }
          }
          .age {
            margin-top: 16rpx;
            font-size: 28rpx;
            color: #757575;
            font-weight: 400;
          }
          .other {
            max-height: 63rpx;
            margin-top: 20rpx;
            color: #9b9b9b;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            .wxParse-span {
              font-size: 20rpx !important;
            }
          }
        }
      }
    }
  }
}

//关于
.info-boxer {
  .institution {
    background: #fff;
    padding: 40rpx 40rpx 20rpx 40rpx;
    color: #757575;
    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: #4a4a4a;
    }
    .institution-box {
      margin-top: 40rpx;
      align-content: flex-start;
      .cover {
        width: 156rpx;
        height: 156rpx;
        border-radius: 100%;
      }
      .base-info {
        flex: 1;
        padding-top: 8rpx;
        margin-left: 30rpx;
        font-size: 24rpx;
        .base-top {
          justify-content: space-between;
        }
        .name {
          width: 290rpx;
          color: #4a4a4a;
          font-weight: bold;
          font-size: 32rpx;
        }
        .count-info {
          margin-top: 8rpx;
          .course-cnt {
            font-size: 24rpx;
            color: #9b9b9b;
            .num {
              font-size: 36rpx;
              color: #14CC76;
              font-weight: bold;
            }
            &:first-child {
              width: 170rpx;
              .num {
                padding-left: 20rpx;
              }
              position: relative;
              &:after {
                position: absolute;
                right: 0;
                top: 0;
                content: '';
                display: inline-block;
                width: 2rpx;
                height: 88rpx;
                background: #f1f1f1;
              }
            }
            &:last-child {
              flex: 1;
              text-align: center;
            }
          }
        }
        .focus {
          font-size: 24rpx;
          height: 48rpx;
          // line-height: 42rpx;
          padding: 0 20rpx;
          color: #14cc76;
          border: 1rpx solid #14cc76;
          border-radius: 28rpx;
          margin-left: 20rpx;
          display: flex;
          align-items: center;
          &.focused {
            color: #757575;
            border: 1rpx solid #cccccc;
            i.icon-check {
              margin-right: 8rpx;
            }
          }
          i.icon-check {
            padding-top: 4rpx;
            font-size: 13rpx;
          }
          i.icon-guanzhu {
            position: relative;
            top: 1rpx;
          }
        }
      }
    }
    .intro {
      margin-top: 40rpx;
      font-size: 28rpx;
    }
    .contact-way {
      .title {
        color: #4a4a4a;
        font-size: 28rpx;
        font-weight: bold;
        margin-bottom: 3rpx;
      }
      margin-top: 40rpx;
      font-size: 24rpx;
    }
  }
}
.empty {
  padding: 500rpx 0;
}
.study-info {
  color: #757575;
  .tab {
    .van-tab {
      color: #757575;
    }
    .van-tabs__line {
      background-color: #14cc76;
      height: 8rpx !important;
      width: 32rpx !important;
      left: 5%;
      bottom: 8rpx;
    }
    .van-tab--active {
      color: #14CC76;
      font-size: 36rpx;
      font-weight: bold;
    }
    .van-hairline--top-bottom:after {
      display: none;
    }
    .van-tabs__scroll--line {
      // margin: 0 auto;
      padding-right: 49%;
    }
  }
}

.content {
  padding: 10rpx 0;
  // min-height: 2400rpx;

  &.no-padding {
    padding: 0;
  }

  .sep {
    height: 20rpx;
    background: #f7f7f7;
  }
}
